<template>
	<view>
		<loadPage :loading="showLoading"></loadPage>
		<template v-if="!showLoading">
			<view class="details_image">
				<u-swiper :list='imageList' height="600" imgMode="aspectFill" interval="3500" border-radius="0"
					:indicator="true" circular indicatorMode="dot" indicator-pos="topRight" @click="imgPreview"></u-swiper>
			</view>
			<view class="details_title">
				<view class="details_title_price">
					<view><span style='font-size: 30rpx;position: relative;left: -4rpx;'>￥</span>{{ goodsInfo.goodsPrice }}
					</view>
					<view class="details_title_text">
						{{ goodsInfo.goodsType + '-'+ goodsInfo.goodsVarieties }}
					</view>
				</view>
				<u-icon :name="collect?'heart-fill':'heart'" size="54" @click.native="addCollect" class="details_title_icon"
					:color="collect?'rgba(255, 87, 51, 1)':'rgba(112, 112, 112, 1)'"></u-icon>
			</view>
			<view class="datails_body">
				<view
					style="height: 80rpx;font-size: 30rpx;color: rgba(255, 87, 51, 1);line-height: 90rpx; border-bottom:1px solid rgba(166, 166, 166, 1);">
					商品详情
				</view>
				<detailItem title="种类">{{ goodsInfo.goodsType}}</detailItem>
				<detailItem title="品类">{{ goodsInfo.goodsVarieties }} </detailItem>
				<detailItem title="总重量">{{ goodsInfo.goodsKilogram }} kg</detailItem>
				<detailItem title="预售">{{ goodsInfo.goodsStatus == 1 ? '是' : '否' }}</detailItem>
				<detailItem title="上新时间" v-if="goodsInfo.goodsStatus">{{ goodsInfo.goodsNewTime }}</detailItem>
				<detailItem title="发布日期">{{ goodsInfo.goodsCreateTime }}</detailItem>
				<detailItem title="生产地区">{{ goodsInfo.goodsProductionArea }}</detailItem>
				<detailItem title="备注">{{ goodsInfo.remark | strLength }}</detailItem>
			</view>
			<view class="dateils_foot">
				<view class="dateils_foot_left">
					<u-icon name="phone" size="48" label="联系商家" label-pos="bottom" label-size="20"
						color="rgba(255, 141, 26, 1)" label-color="rgba(255, 141, 26, 1)" @click="getPhoneNumber"></u-icon>
				</view>
				<view class="dateils_foot_right">
					<button class="add_order" @click="placeorder()">下单</button>
				</view>
			</view>
			<view class="adaptation"></view>
		</template>
	</view>
</template>

<script>
	import {
		getGoodsInfo,
		addGoodsCollect,
		removeGoodsCollect,
		getMerchantPhoneNumber
	} from "apis/farmer/goods"
	import detailItem from "components/common/detailItem"
	import loadPage from "components/common/loadPage"
	import {
		mapGetters
	} from "vuex"
	// 商品详情页
	export default {
		data() {
			return {
				goodUuid: '', //接收uuid
				type: 0,
				collect: 0,
				phone: "",
				goodsData: {},
				imageList: []
			}
		},
		components: {
			detailItem,loadPage
		},
		watch: {
			"getUserLoginState": function() {
				this.getProductInfo()
			}
		},
		computed: {
			...mapGetters(["getUserLoginState"]),
			showLoading(){
				return !Object.keys(this.goodsData).length
			},
			goodsInfo() {
				return {
					/* 微信小程序依然会显示undefined和null所以用空串代替 */
					"goodsPrice": this.goodsData["productPrice"] || "",
					"goodsVarieties": this.goodsData["productVariety"] || "",
					"goodsType": this.goodsData["productSpecies"] || "",
					"goodsProductionArea": this.goodsData["productProductionArea"] || "",
					"goodsKilogram": this.goodsData["productWeight"] || "",
					"goodsPrice": this.goodsData["productPrice"] || "",
					"goodsStatus": this.goodsData["productStatus"] || "",
					"goodsNewTime": this.goodsData["marketTime"] || "",
					"goodsCreateTime": this.goodsData["createTime"] || "",
					"remark": this.goodsData["productRemark"] || "",
				}

			}
		},
		methods: {
			addSwiperImageList(imageList) {
				for (const image of imageList) {
					this.imageList.push({
						url: image,
						type: 'image'
					})
				}
			},

			async addCollect() {
				if (!this.getUserLoginState) return this.loginPrompt()
				if (!this.collect) {
					/* 收藏 */
					const {
						success,
						msg
					} = await addGoodsCollect(this.goodUuid, this.type)
					if (success) return this.collect = 1
					return this.$errorMsg(msg)
				} else {
					/* 取消收藏 */
					const {
						success,
						msg
					} = await removeGoodsCollect(this.goodUuid)
					if (success) return this.collect = 0
					return this.$errorMsg(msg)
				}

			},

			/* 下单 */
			placeorder() {
				this.pushNewPage("place_order", {
					productCover: this.goodsData['productCover'],
					productPrice: this.goodsData['productPrice'],
					productProductionArea: this.goodsData['productProductionArea'],
					createTime: this.goodsData['createTime'],
					productVariety: this.goodsData['productVariety'],
					contactInfoId: this.goodsData['contactInfoId'],
					goodsId: this.goodsData['id'],
				})

			},

			//图片预览 -----
			imgPreview(current) {
				const urls = this.imageList.map(item => {
					return item['url']
				})
				uni.previewImage({
					current,
					urls
				})
			},
			async getPhoneNumber() {
				const {id} = this.goodsData
				const {
					code,
					data,
					msg
				} = await getMerchantPhoneNumber(0,id)
				if (code !== 200) return this.$errorMsg(msg)
				uni.makePhoneCall({
					phoneNumber: data
				});
			},

			/* 错误处理 */
			error(msg) {
				const that = this
				this.$showTitleModule(msg, that.goback)
			},

			async getProductInfo() {
				try {
					const {
						data,
					} = await getGoodsInfo(this.goodUuid, this.type)
					const imageList = data["imgList"] ? [...new Set(data["imgList"])] : [data['productCover']]
					this.addSwiperImageList(imageList)
					this.collect = data['isCollection']
					this.goodsData = data
				} catch (e) {
					this.error("数据获取失败")
				}
			}

		},

		onLoad() {
			const {
				id,
				type
			} = this.$Route.query
			if (!id) return this.error("商品数据获取失败")
			this.goodUuid = id
			this.type = type
			this.getProductInfo();
		}
	}
</script>

<style>
	@import url("product_details.css");

	.tag-red {
		color: rgba(255, 87, 51, 1);
	}
</style>
